<template>
    <el-container>
        <el-header>
            <stock-header></stock-header>
        </el-header>
        <el-main>
            <el-tabs v-model="activeName" class="demo-tabs"
             @tab-change="change">
            <el-tab-pane label="周线突破10分位点" name="weekLpUpDetail">
                <week-lp-up-detail v-if="activeName ==='weekLpUpDetail'"></week-lp-up-detail>
            </el-tab-pane>
            <el-tab-pane label="日分位点新高" name="dailyLpNewHighDetail">
                <DayLpNewHighDetail v-if="activeName ==='dailyLpNewHighDetail'"></DayLpNewHighDetail>
            </el-tab-pane>
            <el-tab-pane label="周分位点新高" name="weekLpNewHighDetail">
                <WeekLpNewHighDetail v-if="activeName ==='weekLpNewHighDetail'"></WeekLpNewHighDetail>
            </el-tab-pane>
            <el-tab-pane label="月分位点新高" name="monthLpNewHighDetail">
                <MonthLpNewHighDetail v-if="activeName ==='monthLpNewHighDetail'"></MonthLpNewHighDetail>
            </el-tab-pane>
            <el-tab-pane label="突破10分位点" name="monthLpUpDetail">
                <month-lp-up-detail v-if="activeName ==='monthLpUpDetail'"></month-lp-up-detail>
            </el-tab-pane>
            <el-tab-pane label="跌破10分位点" name="monthLpDownDetail">
                <month-lp-down-detail v-if="activeName ==='monthLpDownDetail'"></month-lp-down-detail>
            </el-tab-pane>
            <el-tab-pane label="突破300日线" name="weekUp300DDetail">
                <week-up-300-d-detail v-if="activeName ==='weekUp300DDetail'"></week-up-300-d-detail>
            </el-tab-pane>
            <el-tab-pane label="跌破300日线" name="weekDown300DDetail">
                <week-down-300-d-detail v-if="activeName ==='weekDown300DDetail'"></week-down-300-d-detail>
            </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import StockHeader from '../components/StockHeader.vue';
import MonthLpDownDetail from '../components/MonthLpDownDetail.vue';
import MonthLpUpDetail from '../components/MonthLpUpDetail.vue';
import WeekUp300DDetail from '../components/WeekUp300DDetail.vue';
import WeekDown300DDetail from '../components/WeekDown300DDetail.vue';
import WeekLpUpDetail from '../components/WeekLpUpDetail.vue';
import WeekLpNewHighDetail from '../components/WeekLpNewHighDetail.vue';
import MonthLpNewHighDetail from '../components/MonthLpNewHighDetail.vue';
import DayLpNewHighDetail from '../components/DayLpNewHighDetail.vue';

        document.title = "分位点详情";

        const activeNameKey = "LpDetailActiveName"
        const activeName = ref(sessionStorage.getItem(activeNameKey) || 'monthLpUpDetail')

        const change = (tabName) => {
            sessionStorage.setItem(activeNameKey, tabName)
        }
</script>